<template>
  <q-dialog v-model="dialog" persistent backdrop-filter="contrast(0.8) brightness(0.5)">
    <div class="full-width relative-position">
      <template v-if="backStyle == 0">
        <div class="q-pa-md back-box">
          <div class="flex itmes-center justify-center">
            <div class="center" style="border-radius: 8px; overflow: hidden">
              <img src="~/assets/images/public/logo.png" alt="logo" style="width: 28px; height: 28px" />
            </div>
            <div class="center q-mx-xs"><q-icon name="close" color="black" size="16px" /></div>
            <div class="center" style="border-radius: 8px; overflow: hidden">
              <img :src="prodImg" alt="logo" style="width: 28px; height: 28px" />
            </div>
          </div>

          <div style="font-size: 18px; letter-spacing: 1px" class="q-mt-md center text-weight-bold">
            备用金专属额度
          </div>

          <div class="q-px-lg q-mt-md">
            <q-img src="~/assets/images/home/dialog-erdu.png" :ratio="434 / 128" no-spinner no-transition />
          </div>

          <div class="text-center q-mt-md" style="color: #666666; font-size: 16px">
            前往{{ prodName }}，<span style="color: #fe6c0b">领取新人</span>
          </div>
          <div class="text-center q-mt-xs" style="color: #666666; font-size: 16px">
            专属特批额度，<span style="color: #fe6c0b">今天有效</span>
          </div>

          <q-btn class="full-width submit-btn q-mt-lg" @click="submit" rounded unelevated padding="sm">
            <div class="q-py-xs">
              领取我的额度
              <div class="pointer">
                <img src="~/assets/images/public/pointer.png" style="display: block; width: 45px" />
                <!-- <img src="~/assets/images/public/pointer.gif" style="display: block; width: 70px" /> -->
              </div>
            </div>
          </q-btn>
        </div>
        <div class="close-btn" style="margin: 16px;">
          <img @click="close" style="width: 16px;height: 16px;" src="~/assets/images/public/close.png" alt="">
        </div>
      </template>
      <template v-if="backStyle == 1">
        <img src="~/assets/images/public/back_img_v2.png" style="width: 100%;padding-top: 30px;" alt="">
        <div class="goto-btn">
          <div class="pointer" style="right: 6%;">
            <img src="~/assets/images/public/pointer.png" style="display: block; width: 45px" />
            <!-- <img src="~/assets/images/public/pointer.gif" style="display: block; width: 70px" /> -->
          </div>
          <div @click="submit" style="width: 240px; height: 50px;"></div>
        </div>
        <div class="close-btn" style="top: 2px;right: 5px;">
          <div @click="close"
            style="width: 32px;height: 32px;padding: 7px; border-radius: 50%; border: 1px solid #FFFFFF;">
            <img style="width: 16px;height: 16px;" src="~/assets/images/public/close_3.png" alt="">
          </div>
        </div>
      </template>

    </div>
  </q-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Show } from './BackDialog';
import { useWxHook } from 'src/hooks/wx_hooks';
import { useRoute, useRouter } from 'vue-router';
import wxImg from 'src/assets/images/home/wx-logo.png'
const props = defineProps({
  prodName: {
    default: '微信',
    type: String
  },
  prodImg: {
    default: wxImg,
    type: String
  },
  isCustomizeGoto: {
    default: false,
    type: Boolean
  },
  backStyle: {
    default: 0,
    type: Number
  }
})
const emits = defineEmits(['goto'])
const dialog = ref(false);
const loading = ref(false);

const router = useRouter();
const route = useRoute();

const show: Show = async () => {
  dialog.value = true;
};

const submit = () => {
  if (props.isCustomizeGoto) {
    emits('goto');
    close()
    return
  }
  if (useWxHook().isMiniprogram.value) {
    return useWxHook().toWxMiniGZH();
  }
  return router.replace({ path: '/wxfollow', query: route.query });
};

const close = () => {
  dialog.value = false;
};
defineExpose({ show });
</script>

<style lang="scss" scoped>
.goto-btn {
  position: absolute;
  bottom: 23px;
  right: calc((100% - 220px) / 2);
}

.close-btn {
  position: absolute;
  right: 0;
  top: 0;
}

.back-box {
  background-color: #fff;
  background-image: url(src/assets/images/public/dialog-top.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  border-radius: 4vw;
  overflow: hidden;
}

.submit-btn {
  background-color: #1277ff;
  color: #fff !important;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #000;

  .tips {
    position: absolute;
    $width: 120px;
    width: $width;
    top: -0.225 * $width * 0.9;
    height: 0.225 * $width;
    background: url(src/assets/images/home/btn-tips.png) no-repeat;
    background-size: 100% 100%;
  }
}

.pointer {
  position: absolute;
  right: calc(10% - 0px);
  top: calc(50% - 4px);
  z-index: 1;

  img {
    position: abs;
    z-index: 1;
    animation: scale-anm 2s infinite;
  }
}

@keyframes scale-anm {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.2);
  }

  50% {
    transform: scale(1);
  }

  75% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}
</style>
